<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阳吉芳的个人网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/index/index.css?v=<?php echo time(); ?>" />
    <script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body>
        <div class="header">
            <!--<div class="title">小学生吉芳的主页</div>-->
        </div>
        <div class="nav">
            <div class="nav-left"></div>
            <div class="nav-inner">
                <div class="nav-item">首页</div>
                <div class="nav-item">
                    博客
                    <div class="sub-nav">
                        <div class="sub-item">abc</div>
                        <div class="sub-item">aaaa</div>
                    </div>
                </div>
                <div class="nav-item">收藏</div>
                <div class="nav-item">友情链接</div>
            </div>
            <div class="nav-right"></div>
        </div>
        <div class="body">
            <div class="left">
                <div class="item" style="transition: all 1s;">
                    <div class="image" >
                        <img src="https://pngimg.com/uploads/man/man_PNG6526.png" />
                    </div>
                    <div class="title">没人看好的日子，你更要多一份坚强</div>
                    <div class="desc">1. 将近一个月的时间，从一个旱鸭子马马虎虎变成了一个略显及格的水鸭子。 游泳课程结束之后，每个星期总会花费三个晚上去游泳馆自我训练。 双腿打水.</div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="https://pngimg.com/uploads/man/man_PNG6531.png" />
                    </div>
                    <div class="title">没人看好的日子，你更要多一份坚强</div>
                    <div class="desc">1. 将近一个月的时间，从一个旱鸭子马马虎虎变成了一个略显及格的水鸭子。 游泳课程结束之后，每个星期总会花费三个晚上去游泳馆自我训练。 双腿打水.</div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="https://pngimg.com/uploads/polo_shirt/polo_shirt_PNG8161.png" />
                    </div>
                    <div class="title">没人看好的日子，你更要多一份坚强</div>
                    <div class="desc">1. 将近一个月的时间，从一个旱鸭子马马虎虎变成了一个略显及格的水鸭子。 游泳课程结束之后，每个星期总会花费三个晚上去游泳馆自我训练。 双腿打水.</div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="https://pngimg.com/uploads/leg/leg_PNG4826.png" />
                    </div>
                    <div class="title">没人看好的日子，你更要多一份坚强</div>
                    <div class="desc">1. 将近一个月的时间，从一个旱鸭子马马虎虎变成了一个略显及格的水鸭子。 游泳课程结束之后，每个星期总会花费三个晚上去游泳馆自我训练。 双腿打水.</div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="https://pngimg.com/uploads/volcano/volcano_PNG23.png" />
                    </div>
                    <div class="title">没人看好的日子，你更要多一份坚强</div>
                    <div class="desc">1. 将近一个月的时间，从一个旱鸭子马马虎虎变成了一个略显及格的水鸭子。 游泳课程结束之后，每个星期总会花费三个晚上去游泳馆自我训练。 双腿打水.</div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="https://pngimg.com/uploads/water/water_PNG50231.png" />
                    </div>
                    <div class="title">没人看好的日子，你更要多一份坚强</div>
                    <div class="desc">1. 将近一个月的时间，从一个旱鸭子马马虎虎变成了一个略显及格的水鸭子。 游泳课程结束之后，每个星期总会花费三个晚上去游泳馆自我训练。 双腿打水.</div>
                </div>
                <div class="item">
                    <div class="image">
                        <img src="https://pngimg.com/uploads/lilium/lilium_PNG114.png" />
                    </div>
                    <div class="title">没人看好的日子，你更要多一份坚强</div>
                    <div class="desc">1. 将近一个月的时间，从一个旱鸭子马马虎虎变成了一个略显及格的水鸭子。 游泳课程结束之后，每个星期总会花费三个晚上去游泳馆自我训练。 双腿打水.</div>
                </div>
            </div>
            <div class="right">
                <div class="avatar">
                    <img src="https://pngimg.com/uploads/robot/robot_PNG78.png" class="avatar-img" />
                </div>
            </div>
        </div>

        <div class="footer">
            <div>备案号:13432143-1</div>
        </div>

        <div id="scene" style="width:100%;height:100vh;overflow: hidden;position:absolute;left:0;top:0;z-index: -2;">
            <div data-depth="0.2" style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;">
                <img   class="moon" src="https://pngimg.com/uploads/moon/moon_PNG22.png"/>
            </div>
            <div data-depth="0.5" style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;">
                <img   class="aircraft" style="" src="https://pngimg.com/uploads/starwars/starwars_PNG29.png" />
            </div>
            <div data-depth="0.3" style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;">
                <img class="mars" src="https://pngimg.com/uploads/mars_planet/mars_planet_PNG7.png" />
            </div>
            <div id="stars" data-depth="0.1" style="position:absolute;left:0;top:0;width:100%;height:100%;z-index: -2;">

            </div>
        </div>

</body>

<script type="text/javascript">
    var stars = document.getElementById("stars")
    for(var i = 0;i<1000;i++){
        var dom = document.createElement("div");
        dom.className = "star";
        dom.style.left = Math.random()*1500 + 'px';
        var topPosition = Math.random();
        dom.style.top = topPosition*1500 + 'px';
        var size = Math.random()*5;
        dom.style.width = size + 'px';
        dom.style.height = size + 'px';
        dom.style.opacity = 1-topPosition;
        stars.appendChild(dom);
    }

    // VanillaTilt.init(document.querySelectorAll(".item"),{
    //     max:15,
    //     speed:400,
    // });

    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene);


</script>

</html>